<template>
  <div class="goodsinfo" v-if="Object.keys(goods).length !== 0">
    <!-- 商品标题 -->
    <div class="goodstitle">
      {{goods.title}}
    </div>
    <!-- 商品价格信息 -->
    <div class="goodsprice">
      <span class="newprice">{{goods.newPrice}}</span>
      <span class="oldprice">{{goods.oldPrice}}</span>
      <span class="discount">{{goods.discount}}</span>
    </div>
    <!-- 其他信息 -->
    <div class="otherinfo">
      <span>{{goods.columns[0]}}</span>
      <span>{{goods.columns[1]}}</span>
      <span>{{goods.services[goods.services.length-1].name}}</span>
    </div>
    <!-- 服务信息 -->
    <div class="servicesinfo">
      <span class="servicesinfoitem" v-for="index in goods.services.length-1" :key="index">
        <img :src="goods.services[index-1].icon" class="icon">
        <span class="name">{{goods.services[index-1].name}}</span>
      </span>
    </div>
  </div>
</template>

<script>
export default {
  name: 'detailgoodsinfo',
  props: {
    goods: {
      type: Object,
      default() {
        return {}
      }
    }
  },
}
</script>

<style lang="stylus" scoped>
.goodsinfo
  margin-top 15px
  padding 0 8px
  border-bottom 5px solid #f2f5f8
  .goodstitle
    color #222
  .goodsprice
    margin-top 10px
    .newprice
      color #ff8198
      font-size 24px
    .oldprice
      margin-left 5px
      font-size 13px
      color #999
      text-decoration line-through
    .discount
      margin-left 5px
      padding 2px 5px
      font-size 12px
      border-radius 12px
      background-color #ff8198
      color #ffffff
  .otherinfo
    display flex
    justify-content space-between
    margin-top 15px
    font-size 13px
    line-height 30px
    color #999
    border-bottom 1px solid rgba(100,100,100,.1)
  .servicesinfo
    display flex
    justify-content space-between
    .servicesinfoitem
      line-height 61px
      .icon
        width 14px
        height 14px
      .name
        font-size 13px
        color #333
</style>